<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="name" label="车管家名称" width="180" />
      <el-table-column prop="store" label="门店名称" width="180" />
      <el-table-column prop="wuyouCK" label="无忧出库" width="180" />
      <el-table-column prop="wuyouCJ" label="无忧成交" width="180" />
      <el-table-column prop="wuyouXSE" label="无忧销售额" width="180" />
      <el-table-column prop="wuyouSTL" label="无忧提成率(%)" width="180" />
      <el-table-column prop="yanbaoCJSL" label="延保成交数量" width="180" />
      <el-table-column prop="yanbaoXSE" label="延保销售额" width="180" />
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property === "name") {
    // 合并相邻相同的 name 字段
    let _row = 1;
    let _col = 1;

    if (rowIndex === 0 || row.name !== tableData.value[rowIndex - 1].name) {
      // 如果是第一行或者当前行的 name 与上一行的 name 不同
      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
        if (tableData.value[i].name === row.name) {
          _row++;
        } else {
          break;
        }
      }
      return {
        rowspan: _row,
        colspan: _col,
      };
    } else {
      // 当前行的 name 与上一行的 name 相同，隐藏单元格
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};

const data = [
  {
    name: "追风",
    store: "余杭比亚迪",
    wuyouCK: "100",
    wuyouCJ: "200",
    wuyouXSE: "300",
    wuyouSTL: 30,
    yanbaoCJSL: "400",
    yanbaoXSE: "500",
  },
  {
    name: "追风",
    store: "余杭零跑",
    wuyouCK: "100",
    wuyouCJ: "200",
    wuyouXSE: "300",
    wuyouSTL: 30,
    yanbaoCJSL: "400",
    yanbaoXSE: "500",
  },
  {
    name: "追风",
    store: "西溪蔚来",
    wuyouCK: "100",
    wuyouCJ: "200",
    wuyouXSE: "300",
    wuyouSTL: 30,
    yanbaoCJSL: "400",
    yanbaoXSE: "500",
  },
  {
    name: "范增",
    store: "萧山吉利",
    wuyouCK: "100",
    wuyouCJ: "200",
    wuyouXSE: "300",
    wuyouSTL: 30,
    yanbaoCJSL: "400",
    yanbaoXSE: "500",
  },
  {
    name: "若依",
    store: "滨江奥迪",
    wuyouCK: "100",
    wuyouCJ: "200",
    wuyouXSE: "300",
    wuyouSTL: 30,
    yanbaoCJSL: "400",
    yanbaoXSE: "500",
  },
  {
    name: "若依",
    store: "滨江奔驰",
    wuyouCK: "100",
    wuyouCJ: "200",
    wuyouXSE: "300",
    wuyouSTL: 30,
    yanbaoCJSL: "400",
    yanbaoXSE: "500",
  },
];

const tableData = ref([]);
const getData = () => {
  tableData.value = data;
};
getData();
</script>
